<script setup lang="ts">
  import {Icon} from "tdesign-icons-vue-next";
  import {reactive, ref} from "vue"; // 引入TD的icon组件
  import {type TokenRequest} from "@/api/types";
  import {useAppStore, useUserStore} from "@/store";
  import {MessagePlugin, type SubmitContext} from "tdesign-vue-next";
  import {useRoute, useRouter} from "vue-router";

  // 数据类型,抽离到types下
  /*type LoginForm = {
    username: string,
    password: string,
  }*/

  // 渲染动作
  const loginForm = reactive<TokenRequest>({
    username: "",
    password: "",
  });

  // 函数
  /*onMounted(() => {
    tokenApi.createToken(loginForm).then((res) => {
      console.log(res);
    });
  });*/
  //
  const appStore = useAppStore();
  const userStore = useUserStore();


  const loading = ref(false);
  const router = useRouter();
  const route = useRoute();

  const handleLogin = async ({ validateResult}: SubmitContext) => {
    if (validateResult !== true) { // validateResult !== true
      return;
    }
    loading.value = true;
    try {
      await appStore.login(loginForm);
      await userStore.fetchCurrentUser();
      await MessagePlugin.success("登陆成功");
      console.log("route.from.query.redirect",route.query.redirect );
      if (route.query && route.query.redirect) {
        console.log("自定义跳转到", route.query.redirect);
        await router.push({path: route.query.redirect});
      }else {
        //await router.push({ name: "dashboard" });
        await router.push({ path: "/" });
      }

    } finally {
      loading.value = false;
    }

  };



  // 数据校验的规则集
  const rules: LoginForm['rules'] = {
    username: [
      {required: true,message: '用户名必填',type: 'error',trigger: 'blur',},
      {required: true,message: '用户名必填',type: 'error',trigger: 'change',},
      {whitespace: true,message: '姓名不能为空',},
      {min: 3,message: '输入字数应在3到6之间',type: 'error',trigger: 'blur',},
      {min: 6,message: '输入字数应在3到6之间',type: 'error',trigger: 'blur',},
    ],
    password: [
      {required: true,message: '密码必填', type: 'error',}
    ]
  };
</script>

<template>
  <div class="login-container">
    <div class="content">
      <t-card>
        <h1>Vue 第一节课</h1>
        <t-form ref="form" :data="loginForm" :rules="rules" @submit="handleLogin"
                class="login-form" :colon="true" :label-width="0" >
          <t-form-item name="username">
            <t-input v-model="loginForm.username" clearable placeholder="请输入用户名: asdasd">
              <template #prefix-icon>
                <icon name="desktop" />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item name="password">
            <t-input v-model="loginForm.password" type="password" clearable placeholder="请输入密码: admin">
              <template #prefix-icon>
                <icon name="lock-on" />
              </template>
            </t-input>
          </t-form-item>

          <t-form-item>
            <t-button theme="primary" type="submit" block :loading="loading">登录</t-button>
          </t-form-item>
        </t-form>
      </t-card>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .login-container {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    .content{

      width: 400px;

      h1 {
        text-align: center;
      }

      .login-form {
        margin: 20px 0;
      }
    }
  }
</style>